<template>
    <div>
        <el-table v-loading="taskStore.is_loading" :data="list" border style="width: 98%;margin:0 auto;"
            table-layout='auto' :row-style="getRowColor">
            <el-table-column v-if="taskStore.columns_show[0].value" type="index" :index="indexMethod" width="50" />
            <el-table-column v-if="taskStore.columns_show[1].value" prop="" label="申请人" />
            <el-table-column v-if="taskStore.columns_show[2].value" prop="" label="申请部门" />
            <el-table-column v-if="taskStore.columns_show[3].value" prop="" label="单号" />
            <el-table-column v-if="taskStore.columns_show[4].value" prop="name" label="名称" />
            <el-table-column v-if="taskStore.columns_show[5].value" prop="card" label="编号" />
            <el-table-column v-if="taskStore.columns_show[6].value" prop="type" label="项目类型" />
            <el-table-column v-if="taskStore.columns_show[7].value" prop="start_time" label="开始时间" width="110" />
            <el-table-column v-if="taskStore.columns_show[8].value" prop="end_time" label="预计结束时间" width="110" />
            <el-table-column v-if="taskStore.columns_show[9].value" prop="user" label="负责人" />
            <el-table-column v-if="taskStore.columns_show[10].value" prop="executor" label="执行人" />
            <el-table-column v-if="taskStore.columns_show[11].value" prop="progress" label="进度">
                <template v-slot="scope">
                    <el-progress style="min-width: 100px" :percentage="Number(scope.row.progress)"
                        class="custom-progress" :text-inside="true" :stroke-width="20" color="rgb(92, 184, 92)" />
                </template>
            </el-table-column>
            <el-table-column v-if="taskStore.columns_show[12].value" prop="context" label="内容">
                <template v-slot="scope">
                    <div v-html="scope.row.context" >
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-if="taskStore.columns_show[13].value" prop="tasks" label="任务数" />
            <el-table-column v-if="taskStore.columns_show[14].value" prop="status" label="状态">
                <template v-slot="scope">
                    <span :style="{
                        color:
                            scope.row.status == 0
                                ? 'blue'
                                : scope.row.status == 1
                                    ? 'green'
                                    : scope.row.status == 2
                                        ? 'orange'
                                        : 'gray',
                    }">{{
                        scope.row.status == 0
                            ? "待执行"
                            : scope.row.status == 1
                                ? "已完成"
                                : scope.row.status == 2
                                    ? "执行中"
                                    : "已作废"
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column>
                <!-- <span style="color: rgb(81, 154, 208)" class="caozuo">操作▼</span> -->
                <template #default="{ row }">
                    <el-dropdown trigger="click" type="primary" size="small">
                        <span class="caozuo">
                            操作
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="goxq(row)">详情</el-dropdown-item>
                                <el-dropdown-item @click="showDetailsNewWindow(row)">详情(新窗口)</el-dropdown-item>
                                <el-dropdown-item :style="{
                                    display: row.progress < 100 && row.status !== 3 ? 'block' : 'none',
                                    color: row.progress < 100 ? 'none' : 'black'
                                }" @click="updateProgress(row)">更新进度</el-dropdown-item>
                                <el-dropdown-item :style="{
                                    display: row.progress < 100 && row.status !== 3 ? 'block' : 'none',
                                    color: row.progress < 100 ? 'none' : 'black',
                                }" @click="taskStore.updateStatus(row._id, 2)">标记为执行中</el-dropdown-item>
                                <el-dropdown-item :style="{
                                    display: row.progress < 100 && row.status !== 3 ? 'block' : 'none',
                                    color: row.progress < 100 ? 'none' : 'black',
                                }" @click="taskStore.updateStatus(row._id, 1)">标记为已完成</el-dropdown-item>
                                <el-dropdown-item :style="{
                                    display: row.progress < 100 && row.status !== 3 ? 'block' : 'none',
                                    color: row.progress < 100 ? 'none' : 'black',
                                }" @click="taskStore.updateStatus(row._id, 3)">终止项目</el-dropdown-item>
                                <el-dropdown-item :style="{ display: row.status == 3 ? 'none' : 'block' }"
                                    @click="openCommentModal(row)">评论</el-dropdown-item>
                                <el-dropdown-item :style="{ display: row.status == 3 ? 'none' : 'block' }"
                                    @click="addReminder(row)">+ 添加提醒设置</el-dropdown-item>
                                <el-dropdown-item divided @click="taskStore.del_task(row._id)"
                                    type="danger">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <RDialog ref='Dialog3' width="20%" v-model="show" :draggable="true">
            <template #title>更新进度</template>
            <template #default>
                <p>进度(%) <select style="border: 1px solid #ccc;" v-model="progress">
                        <option v-for="i in 100" :key="i" :value="i">{{ i }}%</option>
                    </select></p>
                <p>说明(选填):</p>
                <p>
                    <textarea style="border: 1px solid #ccc;" rows="5" cols="45"></textarea>
                </p>
            </template>
            <template #footer>
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="EditProgress()">确定</el-button>
            </template>
        </RDialog>
        <xq :info="info" v-if="xqshow"  :guanbi="()=>{xqshow=false}"/>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import RDialog, { Rdialog } from '../../r-dialog.vue'
import { useTaskStore } from '../store/index'
import xq from "./xq.vue";
const progress = ref('')
const Dialog3: Ref<Rdialog> = ref<Rdialog>()
const taskStore = useTaskStore()
const uid = ref('')

const updateProgress = (row) => {
    progress.value = row.progress
    uid.value = row._id
    show.value = true

}
const info = ref({})
const xqshow = ref(false)
const goxq = (row) => {
    info.value = row
    xqshow.value = true
    
}

const indexMethod = (index: number) => {
    return index + 1;
};
const show = ref(false)

const EditProgress = () => {
    taskStore.update_task_progress(uid.value, progress.value)
    show.value = false
}
const showDetailsNewWindow = (row: any) => {
    // window.open(`/taskDetails?id=${row.id}`);
};
const openCommentModal = (row: any) => {
    console.log(row);
};
const addReminder = (row: any) => {
    console.log(row);
};
defineProps({
    list: {
        type: Array,
        default: [],
    },
});
onMounted(() => {
    taskStore.getTask();
    uid.value = ''
});
const getRowColor = (row: any) => {
    if (row.row.status == 3) {
        return "color: gray";
    } else {
        return "color: black";
    }

}
</script>

<style scoped>
>>>.custom-progress .el-progress-bar__innerText {
    color: black;
}

.caozuo:hover {
    color: rgb(85, 157, 251);
    text-decoration: underline;
    cursor: pointer;
}

.caozuo {
    color: rgb(85, 157, 251);
    position: relative;
}

.el-dropdown-item {
    background-color: #bbb;
}
</style>
